<!-- 某个合同绑定的电表列表明细 -->
<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<div>
				<el-input v-model="queryParams.brandName" class="zs-select-md zs-space-right-sm" placeholder="编号" disabled />
				<el-input v-model="queryParams.assetsPromoteNum" class="zs-select-md zs-space-right-sm" placeholder="品牌名称" disabled />
				<el-input v-model="queryParams.electricMeterCode" class="zs-select-md zs-space-right-sm" placeholder="电表编号" clearable @blur="queryList" />
			</div>
			<el-radio-group v-model="activeTab" @change="tabChange">
				<el-radio-button label="普通表" />
				<el-radio-button label="智能表" />
			</el-radio-group>
		</div>

		<!-- teble -->
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" align="center" :index="index => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="sourceValue" label="来源" minWidth="130" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="electricMeterCode" label="电表编号" minWidth="110" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<template v-if="activeTab == '普通表'">
					<el-table-column prop="materStatusValue" label="操作类型" minWidth="110" show-overflow-tooltip align="center" :formatter="defaultTableData" />
					<el-table-column prop="formatOperationTime" label="操作时间" minWidth="145" show-overflow-tooltip align="center" :formatter="defaultTableData" />
					<el-table-column prop="currentNum" label="抄表读数" minWidth="110" align="right" :formatter="defaultTableData" />
				</template>
				<template v-else>
					<el-table-column prop="formatHandleTime" label="操作时间" minWidth="110" show-overflow-tooltip align="center" :formatter="defaultTableData" />
					<el-table-column prop="formatChargingTime" label="计费时间" minWidth="110" show-overflow-tooltip align="center" :formatter="defaultTableData" />
					<el-table-column prop="currentNum" label="读数" minWidth="110" show-overflow-tooltip align="right" :formatter="defaultTableData" />
				</template>
				<el-table-column prop="rowNum" label="行度" minWidth="110" align="right" :formatter="defaultTableData" />
				<el-table-column prop="multiplier" label="倍率" minWidth="110" align="right" :formatter="defaultTableData" />
				<el-table-column prop="dosage" label="用量" minWidth="110" align="right" :formatter="defaultTableData" />
				<el-table-column v-if="activeTab == '普通表'" prop="operationUserValue" label="操作人" minWidth="110" align="center" show-overflow-tooltip :formatter="defaultTableData" />
			</el-table>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import { electricityMeterDetailListApi, electricitySmartMeterDetailListApi, contractInfoApi } from '@/api/energy.js';
	import { ref, reactive } from 'vue';
	import { useStore } from 'vuex';
	import { useRoute } from 'vue-router';
	import { defaultTableData, parseTime } from '@/utils/publicUtils';

	const route = useRoute();
	const store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	//查询条件
	let queryParams = reactive({ contractId: route.query.id, pageNumber: 1, pageSize: curPageSize.value });

	//tab查询
	let activeTab = ref('普通表');
	const tabChange = tab => {
		queryParams.pageNumber = 1;
		queryParams.electricMeterCode = '';
		queryList();
	};

	// 列表数据源
	const queryList = async init => {
		if (process.env.NODE_ENV !== 'development') {
			let portalResourceList = JSON.parse(localStorage.getItem('portalResourceList'));
			if (init != 'init' && !portalResourceList.includes('p_btn_property_inspection_list_query')) return;
		}
		tableData.loading = true;
		let res = activeTab.value == '智能表' ? await electricitySmartMeterDetailListApi(queryParams) : await electricityMeterDetailListApi(queryParams);
		if (res.data.code !== 200) return;
		initData(res.data.data.list);
		tableData.data = res.data.data.list || [];
		tableData.total = res.data.data.total || 0;
		tableData.loading = false;
	};

	const initData = list => {
		list.forEach(item => {
			item.formatOperationTime = parseTime(item.operationTime, '{y}-{m}-{d} {h}:{i}');
			if (activeTab.value == '智能表') {
				item.formatHandleTime = item.materStatus == 1 ? parseTime(item.addTime, '{y}-{m}-{d} {h}:{i}') : parseTime(item.reduceTime, '{y}-{m}-{d} {h}:{i}');
				item.formatChargingTime = parseTime(item.chargingTime, '{y}-{m}-{d} {h}:{i}');
			}
		});
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			queryParams.pageSize = size;
		} else {
			queryParams.pageNumber = size;
		}
		queryList('init');
	};

	//合同详情
	const getContractInfo = async () => {
		let res = await contractInfoApi({ contractId: route.query.id });
		queryParams.brandName = res.data.data.brandName;
		queryParams.assetsPromoteNum = res.data.data.assetsPromoteNum;
	};

	queryList('init');
	getContractInfo();
</script>
